<script>
export default {
  props: {
    helper: {
      type: Object,
      required: true
    },
    col: {
      type: Object,
      required: true
    },
    colIndex:{
      type: Number,
      required: true,
    },
    isSelect:{
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      isDraging: false,
      startPointX: null,
      startPointY: null,
      startWidth: null,
      endWidth: null,
    }
  },
  mounted(){
    // this.$refs.colDiv.style.width = this.col.width;
  },
  render(h) {
    return h('div',
      {
        ref: 'colDiv',
        class: 'col',
        style: {
          position: 'relative',
          overflow: 'visible',
          width: this.col.width,
          zIndex: this.colIndex+1,
          background: this.isSelect?"rgba(240, 240, 240, 0.7)":'',
          fontWeight: this.isSelect?'bold':'normal',
          color:this.isSelect?'#109968':'black'
        },
      },
      [
        h('div',
        {
          style:{
            overflow:'hidden',
          }
        },
        this.$slots.default),
        h('div', {
          class: 'dragBlock',
          style:{
            zIndex: 1
          },
          on: {
            mousedown: this.mousedown
          },
        })
      ])
  },
  inject:['ColumnWidthChanged'],
  methods: {
    mousedown(event) {
      this.isDraging = true;
      this.startPointX = event.clientX;
      this.startPointY = event.clientY;
      this.startWidth = this.$refs.colDiv.offsetWidth;
      window.addEventListener('mousemove', this.mousemove)
      window.addEventListener('mouseup', this.mouseup)
      event.preventDefault();
    },
    mousemove(event) {
      if (this.isDraging && event.movementX != 0) {
        let x = event.clientX - this.startPointX;
        x = x / this.helper.scale;
        let m = this.startWidth + x
        m = Math.max(0,m)
        this.endWidth = m;
        this.col.width = m +'px'
      }
    },
    mouseup(event) {
      this.ColumnWidthChanged(this.colIndex, this.endWidth, this.startWidth)
      this.isDraging = false;
      this.startPointX = null;
      this.startPointY = null;
      this.startWidth = null;
      window.removeEventListener('mousemove', this.mousemove)
      window.removeEventListener('mouseup', this.mouseup)
    }
  }
}
</script>

<style scoped>
.dragBlock {
  position: absolute;
  right: 0px;
  height: 100%;
  width: 4px;
  background: rgba(132, 9, 255, 0);
  cursor: col-resize;
}
.col::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid rgb(154, 154, 154);
  box-sizing: border-box;
}
</style>